<template>
  <div  class="tab-bar-wrap xui-fc"  :class="{'scrollable': isScrollable}" >
    <button class="xui-fl tab-left"  @click="scroll('left')" :class="{'disable': offsetX === 0}"> 
      <!-- <i class="el-icon-caret-left"></i> -->
    </button>
    <div class="tab-bar-scroll" ref="tabWrap">
      <div class="tab-button-wrap" ref="tabContent" :style="{transform : `translateX(${this.offsetX}px)`}">
        <tab-button class="xui-margin-right" v-for="(item,index) in btns" :name="item.name" :isActive="item.name === myActiveTabName"  v-on:chooseTab="refreshActiveTabName" :key="index">{{item.text}}</tab-button>
      </div>
    </div>
    <button class="xui-fr tab-right" @click="scroll('right')" :class="{'disable': (contentWidth - wrapWidth + offsetX) <= 0}">
      <!-- <i class="el-icon-caret-right"></i> -->
    </button>
  </div>
</template>

<script>
import tabButton from "./tab-button";
let btns = [
  {
    name: "personal",
    text: "个人预约"
  },
  {
    name: "company",
    text: "团队预约"
  }
];

export default {
  props: {
    btns: {
      default() {
        return btns;
      }
    },
    activeTabName: {
      default() {
        return this.btns[0].name;
      }
    }
  },
  components: {
    tabButton
  },
  data() {
    return {
      wrapWidth: null,
      contentWidth: null,
      offsetX: 0,
      myActiveTabName: this.activeTabName
    };
  },
  computed: {
    isScrollable() {
      return this.contentWidth > this.wrapWidth;
    }
  },
  methods: {
    refreshActiveTabName(tabName, offsetLeft, itemWidth) {
      this.myActiveTabName = tabName;
      this.$emit("tab-click", tabName);

      // lackWidth： item与当前wrap可是区域相比，少的宽度。 小于0时显示在可视区域中。
      let lackWidth = Math.abs(this.offsetX) - offsetLeft;

      // overWidth : item与可是区域wrap相比，多出的宽度。 小于0时显示在可视区域中。
      let overWidth =
        offsetLeft + itemWidth - this.wrapWidth - Math.abs(this.offsetX);

      if (lackWidth < 0 && overWidth < 0) return false;

      if (lackWidth > 0) {
        this.offsetX += lackWidth;
        return false;
      }

      if (overWidth > 0) {
        this.offsetX -= overWidth;
      }
    },
    scroll(direction) {
      if (direction == "right") {
        let restOffset = this.contentWidth - this.wrapWidth + this.offsetX;
        if (restOffset > this.wrapWidth) {
          this.offsetX -= this.wrapWidth;
        } else {
          this.offsetX -= restOffset;
        }
      } else if (direction == "left") {
        if (Math.abs(this.offsetX) > this.wrapWidth) {
          this.offsetX += this.wrapWidth;
        } else {
          this.offsetX = 0;
        }
      }
    }
  },
  mounted() {
    this.wrapWidth = this.$refs.tabWrap.clientWidth;
    this.contentWidth = this.$refs.tabContent.scrollWidth;
    setTimeout(() => {
      this.scroll("right");
      setTimeout(() => {
        this.scroll("left");
      }, 1000);
    }, 500);
  },
  watch: {
    activeTabName: function() {
      this.wrapWidth = this.$refs.tabWrap.clientWidth;
    }
  }
};
</script>
<style lang="less" scoped>
.tab-bar-wrap {
  width: 100%;
  position: relative;
  .tab-left,
  .tab-right {
    position: absolute;
    display: none;
    top: 0;
    z-index: 10;
    height: 38px;
    width: 24px;
    border: none;
    outline: none;
    cursor: pointer;
  }
  .tab-left {
    left: 0;
    background: url("./tab-scroll-btn-left.png") left center no-repeat;
    &.disable {
      background-image: url("./tab-scroll-btn-left-disable.png");
    }
  }
  .tab-right {
    background: url("./tab-scroll-btn-right.png") right center no-repeat;
    right: 0;
    &.disable {
      background-image: url("./tab-scroll-btn-right-disable.png");
    }
  }
  .tab-bar-scroll {
    overflow: hidden;
    .tab-button-wrap {
      white-space: nowrap;
      position: relative;
      transition: transform 0.5s;
    }
  }
}
.scrollable.tab-bar-wrap {
  padding-left: 24px;
  padding-right: 24px;
  .tab-left,
  .tab-right {
    display: block;
  }
}
</style>

